import React, { useState, useCallback } from 'react'

type ChildProps = {
  click: () => void
}

const Child1 = ({ click }: ChildProps) => {
  console.log('Child1 组件更新')
  return (
    <div style={{ backgroundColor: 'lightsalmon', padding: 5 }}>
      子组件1：<button onClick={click}>点击</button>
    </div>
  )
}

// React.memo()
// 场景：当你想要避免函数组件 props 没有变化而产生的不必要的更新时，就要用到 React.memo 了
// 作用：记忆组件上一次渲染结果，在 props 没有变化时复用该结果，避免函数组件不需要的渲染

// 语法：const MemoChild = React.memo(Child)
// React.memo 是一个高阶组件，用来记忆组件
// 参数：需要被记忆的组件，或者说是需要避免不必要更新的组件
// 返回值：React 记忆的 Child 组件

// 原理：通过对比检查更新前后的 props 是否相同，来决定是否复用上一次的渲染结果
// 如果相同，复用上一次的渲染结果
// 如果不同，重新渲染组件
const Child2 = React.memo(() => {
  console.log('Child2 组件更新')
  return <div style={{ backgroundColor: 'lightgoldenrodyellow', padding: 5 }}>子组件2</div>
})

const App = () => {
  const [count, setCount] = useState(0)

  // 回调函数
  const handleClick = useCallback(() => {
    setCount(count + 10)
  }, [count])

  return (
    <div style={{ backgroundColor: 'lightseagreen', padding: 10 }}>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child1 click={handleClick} />

      <hr />

      <Child2 />
    </div>
  )
}

export default App
